import { PureComponent } from "react";
import {connect} from 'react-redux'
import { subNum } from "../store/features/counter";
import { changeBanner, fetchHomeMultidataAction } from "../store/features/home";

class Home extends PureComponent
{
    componentDidMount()
    {
        this.props.fetchData();
    }

    subNum(num)
    {
        this.props.subNum(num);
    }

    render()
    {
        return (
            <div>
                <div>
                    <h2>Home</h2>
                    <div>counter:{this.props.counter}</div>
                    <button onClick={e=>this.subNum(1)}>-1</button>
                    <button onClick={e=>this.subNum(5)}>-5</button>
                    <button onClick={e=>this.subNum(10)}>-10</button>
                </div>
           </div>
       )
    }
}

const mapStatetoProps = (state) => {
    return {
        counter: state.counter.counter,
    }
}

const mapDispatchtoProps = (dispatch) => {
    return {
        subNum: (num) => {
            dispatch(subNum(num));
        },
        changeBanner(banner)
        {
            dispatch(changeBanner(banner));
        },
        fetchData()
        {
            dispatch(fetchHomeMultidataAction());
        }
    }
}

export default connect(mapStatetoProps,mapDispatchtoProps)(Home);